<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<link href="../css/main.css" type="text/css" rel="stylesheet" />
	<link href="../css/dialog.css" rel="stylesheet" type="text/css">
    <style type="text/css">
      body,html,#container{
        width: 100%;
        height: 80%;
        margin: 0px
      }
    </style>
    <title>API加载</title>
  </head>
  <body>
  	<div class="position_div">
		<img src="../images/position_icon.png" />
		<i>设备管理</i><i>&gt;&gt;</i><i>设备列表管理</i>
	</div>
	<div class="right_div">
		<div class="search_div">
			<div class="label_div">
				<label class="text_label">设备型号：</label>
				<div class="drop_frame">
					<i class="text_i" data-status="0" >请选择</i>
					<input type="hidden" id="qry_model" value="0">
					<span class="span_arrow"></span>
					<ul class="choose_ul type_html">
					</ul>
				</div>
						
				
			</div>
			<div class="label_div">
				<label class="text_label">客户：</label>
				<input type="text" class="input_search" placeholder="支持模糊查询" id="qry_brand" />
			</div>	
			<div class="done_div">
				<button class="btn_common1 title_div2"  onclick="qryItemListBtn()"><i></i>搜索</button>
				
			</div>
            <div class="cl">&nbsp;</div>
		</div>
	</div>
    <div id="container" tabindex="0"></div>
    <script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="../js/common.js"></script>
	<script type="text/javascript" src="../js/dialog.js"></script>
	<script type="text/javascript" src="../js/jquery-data.js"></script>
	<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=6a8c6407384cecce12aef8f55109e024"></script>
	<script type="text/javascript" src="../js/map.js"></script>
	<script type="text/javascript" src="../js/cookieUtil.js"></script>
	
    <script type="text/javascript">

	//用来存放雨点标记
	var marker_arr =[];
	var infoWindow = new AMap.InfoWindow({offset:new AMap.Pixel(0,-30)});
	
	function qryList(){		
		qryItemList();
	}
	
	$(document).ready(function(){
		getDictionaryList();
		
		qryList();
	});
	function qryList(){
		qryItemList();
	}
	function qryItemListBtn(){
		qryItemList();
	}
	function locationCallBack(result){
		if(result){
			var items = JSON.stringify(result);
			items = eval('(' + items + ')');
			items= items.returnObject.pageList;
			var item;
			console.log(items);
			map.clearMap()
			for(var i= 0;i<items.length;i++){   
		 		var marker_top =  new AMap.Marker();
		 		//map_real.setCenter(s);  //设置地图的中心坐标 , 
				var temp = [items[i].longitude,items[i].latitude];
				marker_top.setPosition(temp);
				marker_top.setMap(map);
				
		        var content = document.createElement('div');
			 
			    content.innerHTML = "<Strong>"+items[i].name+"</Strong>&nbsp;</br>"
			    + "设备模板：" + items[i].modelName
			    + "</br>设备序列号：" + items[i].serialNumber
			    + "</br>设备地点：" + replaceNull(items[i].address)
			    + "</br>客户：" + replaceNull(items[i].username)
			     + "</br><a href='javascript:void(0)' target='mainFrame' onclick= 'tolist(this)'>设备列表</a>"
			     + "&nbsp; &nbsp;&nbsp;&nbsp;<a href='javascript:void(0)' target='mainFrame' onclick='toDetail("+items[i].id+")'>设备详情</a>"
			    + "<input type='hidden'  value='"+items[i].id+"' >";
			    content.className = items[i].id;
		        marker_top.content=content;
		        marker_top.on('mouseover',markerClick);
		        marker_top.on('mouseup',mapMarkerClick);
		        marker_top.emit('click',{target:marker_top});
		        //将雨点标记放进数组内,用来清除雨点标记
		        marker_arr.push(marker_top);	
		       
			    var map_bounds = map.getBounds();
			    var falg = map_bounds.contains(temp);  //判断点标记是不是在视野范围内
			   
				
			   /*  //设置中心位置,查看地图定时后不会偏移
			    if(falg){
			    	map.setCenter(mapCenterLout);
			    }else{
			    	map.setCenter(temp);
			    } */
		    }
			map.setFitView();
		}
	}
	
	   function markerClick(e){
	        infoWindow.setContent(e.target.content.innerHTML);
	        infoWindow.open(map, e.target.getPosition());
//	         infoWindow.setPosition(e.target.getPosition());
	        $("#mapContainer .amap-info-content").parent().show();
	      // itemNumWin = e.target.content.className;

	    }
	 	  //点击地图上的标注展示实时直播状况
	   function mapMarkerClick(e){
	   		//var itemNum = e.target.content.className;
	   		//qryRealTimeTaskInfo(itemNum);
	   		
	   }
	function qryItemList(){
		var data = {modelId:$("#qry_model").val(),
				//brand:$("#qry_brand").val(),
				yema:1,length:10000};
		common_ajax('qryDeviceList',data,'locationCallBack');
	}
	
	
	function callBackDictionary(data){
		if(data){
			var items = JSON.stringify(data);
			items = eval('(' + items + ')');
			items= items.returnObject;
			var item;
			var html_items = "";
			for(var i=0;i<items.length;i++){
					item = items[i];
					html_items  += '<li><a href="javascript:void(0)" class="choose_a" data-status="'
					+items[i].id+'" >'+ items[i].name+'</a></li>';	
					//console.log(item);
			}
			//console.log(items);
			//$(".type_html").html(html_items);
			//$(".items").html(html_items);
			$(".type_html").html('<li><a href="javascript:void(0)" class="choose_a" data-status="0" >全部</a></li>'+html_items);
		}
	}
	function getDictionaryList(){
		
		common_ajax('/boilerCloud/model/getModelList.do',{},'callBackDictionary');
		
	}
	
	function toDetail(id){
		setCookie("device_id",id);
		location.href = "deviceMonitor";
		//var that = window.parent.$("#iframeLeft").contents().find("a[href='device/deviceMonitor']").eq(0)
		//window.parent.$("#iframeLeft").contents().find("a").css({"color":"#767676"});
		window.parent.$("#iframeLeft")[0].contentWindow.changeMenu("device/deviceMonitor");
		// that.trigger("click");
		//that.css({"color":"#3e8ed7"});
		//console.log(window.parent.$("#iframeLeft").contents().find("a"));
		//console.log(window.parent.$("#iframeLeft").contents().find("a[href='device/deviceMonitor']").eq(0).text());
		//parent.postMessage('getcolor','*');
		//console.log("-------------");
	}

	function tolist(obj){
		var id = $(obj).nextAll("input").eq(0).val();
		location.href = "deviceList";
		window.parent.$("#iframeLeft")[0].contentWindow.changeMenu("device/deviceList");
	}
       
    </script>
  </body>
</html>